<template>
  <div
    :id="id"
    :class="className"
    :style="{
      height: height,
      width: width,
      backgroundImage: backgroundImage,
      backgroundSize: backgroundSize,
      backgroundPosition: backgroundPosition,
      backgroundRepeat: backgroundRepeat,
    }"
  />
</template>

<script>
import tdTheme from './theme.json'; // 引入默认主题

export default {
  name: 'Echart',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '2.5rem'
    },
    backgroundImage: {
      type: String,
      default: 'none'
    },
    backgroundSize: {
      type: String,
      default: 'none'
    },
    backgroundPosition: {
      type: String,
      default: 'none'
    },
    backgroundRepeat: {
      type: String,
      default: 'none'
    },
    options: {
      type: Object,
      default: () => ({})
    },
    clickBar: {
      type: Boolean,
      default: false
    },
    isclickBar2: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chart: null,
      timer: null
    };
  },
  watch: {
    options: {
      handler(options) {
        if (options.autoMove) {
          if (this.timer) {
            clearInterval(this.timer);
          }
          this.timer = setInterval(() => {
            if (options.dataZoom[0].endValue == 0) {
              options.dataZoom[0].endValue = options.dataLength - 4;
              options.dataZoom[0].startValue = options.dataLength - 1;
              options.dataZoom[1].endValue = options.dataLength - 4;
              options.dataZoom[1].startValue = options.dataLength - 1;
            } else {
              options.dataZoom[0].endValue = options.dataZoom[0].endValue - 1;
              options.dataZoom[0].startValue =
                options.dataZoom[0].startValue - 1;
              options.dataZoom[1].endValue = options.dataZoom[1].endValue - 1;
              options.dataZoom[1].startValue =
                options.dataZoom[1].startValue - 1;
            }
          }, 5000);
          this.chart.setOption(options, true);
        } else {
          // 设置true清空echart缓存
          this.chart.setOption(options, true);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
    this.initChart();
  },
  beforeDestroy() {
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      const t = this;
      // 初始化echart
      this.chart = this.$echarts.init(this.$el, 'tdTheme');
      this.chart.setOption(this.options, true);
      if (this.clickBar) {
        this.chart.getZr().on('click', (params) => {
          const pointInPixel = [params.offsetX, params.offsetY];
          if (this.chart.containPixel('grid', pointInPixel)) {
            const xIndex = this.chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0];
            const handleIndex = Number(xIndex);
            this.$emit('getBarIndex', handleIndex);
          }
        });
      }
      if (this.isclickBar2) {
        // this.$echarts.env.touchEventsSupported = false;
        // this.$echarts.env.wxa = false;
        // this.chart.getZr().on('click', () => {
        //   alert(123);
        // });
        console.log(this.chart);
        console.log('坎坎坷坷扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩');
        this.chart.on('click', function(params) {
          console.log('common-echart');
          t.$emit('clickBar2', params);
        });
      }
    }
  }
};
</script>

<style></style>
